<template>

    
<el-form label-width="120px" ref="form" :model="form">
        <el-form-item label="消防箱编号：">
          <el-input v-model="input" placeholder="请输入消防柜编号"></el-input>
          <el-button>取消</el-button>
          <el-button type="primary" @click="select">确认</el-button>
        </el-form-item>
        <el-form-item label="枪头">
          <el-radio v-model="form.qiangtou" label="1">正常</el-radio>
          <el-radio v-model="form.qiangtou" label="0">损坏</el-radio>
        </el-form-item>
        <el-form-item label="水带">
          <el-radio v-model="form.shuidai" label="1">正常</el-radio>
          <el-radio v-model="form.shuidai" label="0">损坏</el-radio>
        </el-form-item>
        <el-form-item label="箱体">
          <el-radio v-model="form.box" label="1">正常</el-radio>
          <el-radio v-model="form.box" label="0">损坏</el-radio>
        </el-form-item>
        <el-form-item label="阀门">
          <el-radio v-model="form.famen" label="1">正常</el-radio>
          <el-radio v-model="form.famen" label="0">损坏</el-radio>
        </el-form-item>
        <el-form-item label="灭火器">
          <el-radio v-model="form.mhq" label="1">正常</el-radio>
          <el-radio v-model="form.mhq" label="0">损坏</el-radio>
        </el-form-item>
        <el-form-item label="消防报警器">
          <el-radio v-model="form.xfsbjq" label="1">正常</el-radio>
          <el-radio v-model="form.xfsbjq" label="0">损坏</el-radio>
        </el-form-item>
        <el-form-item label="灭火器生产日期:">
          <el-input type="textarea" v-model="form.mhqManufactureDate"></el-input>
        </el-form-item>
        <el-form-item label="负责人:">
          <el-input type="textarea" v-model="form.contacts"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    <!-- 表单 -->
 
</template>

<script>
import Vue from "vue";
export default {
  data() {
    return {
      list: [],
      input: "",
      form: {
        id: "",
        qiangtou: "",
        shuidai: "",
        famen: "",
        xfsbjq: "",
        mhq: "",
        mhqManufactureDate: "",
        box: "",
        date: "",
        remark: "",
        confirm: "",
        address: "",
        contacts: "",
      },
    };
  },
  methods: {
    select() {
      this.axios("http://localhost:3000/test?id=" + this.input).then(
        (response) => {
          if (response.data.length != 0) {
            response.data.forEach((element) => {
              this.form = element;
            });
          } else {
            alert("编号输入错误，请重新输入");
          }
        }
      );
    },
    // 修改
    onSubmit() {
      console.log(this.input);
      console.log(this.form);
      console.log(this.form.remark);
      console.log(this.form.mhq);
      this.axios
        .put("http://localhost:3000/test/" + this.form.id, {
          id: this.form.id,
          qiangtou: this.form.qiangtou,
          shuidai: this.form.shuidai,
          famen: this.form.famen,
          xfsbjq: this.form.xfsbjq,
          mhq: this.form.mhq,
          mhqManufactureDate: this.form.mhqManufactureDate,
          box: this.form.box,
          date: this.form.data,
          remark: this.form.remark,
          confirm: this.form.confirm,
          address: this.form.address,
          contacts: this.form.contacts,
        })
        .then((response) => {});
    },
    // 点击变化
    agreeChange() {},
  },
};
</script>

<style>
#w{
  width: 400px;
  margin: 0 auto;
}

</style>